<template>
	<view>
		<view class="">
			<view class="banner">
				<cf-banner :indicatorDots="true" :height="'325px'" :width="'100%'" :list="banner"></cf-banner>
			</view>
			<view class="price" style="">
				<text>￥{{goods.price}}</text>
			</view>
			<view class="title" style="">
				<view class="titlet">
					{{goods.name}}
				</view>
				<view class="phone" @click="sendPhone">
					<view class="">
						商品数量:{{goods.amount||0}}
					</view>
					<view class="" @click.stop="">
						<uni-number-box :min="1" :max="100" :value="goods.carNumber" @change="changeValue($event)" />
					</view>
				</view>
			</view>
			<view class="detail">
				<cf-title-line></cf-title-line>
				<view class="goods">
					<view class="args">
						商品名称:{{goods.name}}
					</view>
					<view class="args">
						商品介绍:{{goods.intro}}
					</view>
					<view class="args">
						销售量:{{goods.sale}}
					</view>
					<view class="args">
						发布时间:{{goods.pubDate}}
					</view>
				</view>
				<cf-title-line :title="'商品描述'"></cf-title-line>
				<rich-text style="display: flex;justify-content: center;    margin-bottom: 50px;"
					:nodes="goods.content"></rich-text>
			
			</view>
		</view>
		<view class="pay">
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="navleft"
				@buttonClick="navright" />
		</view>
	</view>
</template>

<script>
// import { Logger } from 'sass';
	export default {
		data() {
			return {
				banner: [],
				goods: {},
				shop: {},
				options: [{
						icon: 'chat',
						text: '客服'
					},
					// {
					// 	icon: 'shop',
					// 	text: '店铺',
					// 	// info: 2,
					// 	infoBackgroundColor: '#007aff',
					// 	infoColor: "#f5f5f5"
					// }, 
					{
						icon: 'cart',
						text: '购物车',
						info: 0
					}
				],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
						color: '#fff'
					}
				]
			}
		},
		onShareAppMessage(res) {
			let title = this.goods.title
			return {
				title: (title.length > 22 ? (title.substring(0, 22) + "...") : title),
				path: 'pagesOne/goodsDetail/goodsDetail?id=' + this.goods.id,
			};
		},
		onLoad(options) {
			this.getGoods(options.id);

		},
		onShow() {
			try {
				// this.getCarGoodsCount();
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			getGoods(id) {
				this.apis.goodsDetail({
					id: id
				}).then(res => {
					res.carNumber = 1;
					this.goods = res
					console.log("商品详情1"+this.goods)
					//将图片的宽度变为100%，防止图片太大
					var picture = res.picture;
					picture = picture.replace(/<img/gi, '<img width="100%!important" ');
					res.picture = picture;
					//重新赋值
					this.goods = res;
					console.log("商品详情"+res.picture.split(","))
					this.getBanner(res.picture.split(","))
					// this.getShop(res.id)
				})
			},
			getShop(id) {
				this.apis.getShop({
					sid: id
				}).then(res => {
					this.shop = res
				})

			},
			getBanner(datas) {
				for (let data of datas) {
					console.log(data)
					let obj = {};
					obj.title = data.title;
					obj.url = data
					// obj.poster=data.icon
					// obj.type = (data.indexOf(".mp4") != -1) ? 'video' : 'image';
					obj.type = 'image';
					this.banner.push(obj);
				}

			},
			sendPhone() {
				uni.makePhoneCall({
					phoneNumber: this.shop.phone
				});
			},
			changeValue(value) {
				this.goods.carNumber = value;
			},
			navleft(e) {
				let that = this;
				if (e.content.text == '客服') {
					wx.openCustomerServiceChat({
						//企业微信的企业id
						corpId: 'ww64dc65db4b71b7b0',
						extInfo: {
							//客服链接
							url: 'https://work.weixin.qq.com/kfid/kfc50f855f661cab65e'
						},
						showMessageCard: true,
						sendMessageTitle: '商品-' + that.goods.title,
						sendMessagePath: '/pagesOne/goodsDetail/goodsDetail?id=' + that.goods.id,
						sendMessageImg: that.banner[0].url,
						success: (e) => {
							console.log('e', e)
						},
						fail: (err) => {
							console.log(err)
							uni.showToast({
								title: '暂不支持客服',
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else {
					uni.navigateTo({
						url: "/pagesOne/carscopy/carscopy"
					})
				}
			},
			navright(e) {
				console.log(e)
				if (e.index == 0) {
					this.apis.addCar({
						goodsId: this.goods.id,
						number: this.goods.carNumber
					}).then(res => {
						uni.setTabBarBadge({
							index: 2,
							text: res + ""
						})
						this.getCarGoodsCount()
					})
				} else {
					let that = this;
					this.$t.fd(function() {
						console.log("支付")
						let checkGoods = [];
						checkGoods.push(that.goods)
						uni.setStorageSync("carGoods", checkGoods)
						setTimeout(function() {
							uni.navigateTo({
								url: "/pagesOne/prePay/prePay"
							})
						}, 200)
					}, 500)


				}

			},
			getCarGoodsCount() {
				if (uni.getStorageSync("token")) {
					this.apis.getCarGoodsCount().then(res => {
						console.log(res)
						this.options[1].info = res
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.ba {
		margin: 0px !important;
	}

	.price {
		background-color: #ff5500;
		height: 50px;
		color: white;
		display: flex;
		align-items: center;
		font-size: 28px;
		padding-left: 19px;
	}

	.title {
		height: 55px;
		display: flex;
		font-size: 16px;
		padding-left: 10px;
		padding-right: 10px;
		flex-direction: column;
		margin-top: 10px;
		justify-content: space-between;
	}

	.titlet {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		font-weight: 900;
	}

	.phone {
		font-size: 16px;
		color: #455ce0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail {
		margin-top: 20px;
	}

	.goods {
		margin: 10px 10px;
		background-color: rgba(250, 79, 81, 0.22);
		color: #000000d1;
		font-size: 14px;
		font-weight: 700;
	}

	.args {
		padding: 5px 5px;
	}

	.pay {
		position: fixed;
		bottom: 0px;
		width: 100%;
	}
</style>
